<template>
  <div class="transfer-button-content">
    <el-button v-if="roundFlag" :size="size" round @click.stop="transferFile">
      移动到
    </el-button>
    <el-button
      v-if="circleFlag"
      icon="el-icon-position"
      :size="size"
      circle
      @click.stop="transferFile"
    >
    </el-button>
    <el-tooltip
      v-if="textFlag"
      effect="dark"
      content="移动文件"
      placement="top"
    >
      <el-button type="text" :size="size" circle @click.stop="transferFile">
        <i class="el-icon-position" />
      </el-button>
    </el-tooltip>
    <a href="javascript:;" v-if="liFlag" @click.stop="transferFile">
      <i class="el-icon-position"></i>移<span style="visibility: hidden"
        >下</span
      >动
    </a>
    <el-dialog
      title="移动文件"
      :visible.sync="treeDialogVisible"
      @open="loadTreeData"
      @closed="resetTreeData"
      width="30%"
      :append-to-body="true"
      :modal-append-to-body="false"
      :center="true"
    >
      <div class="tree-content">
        <el-tree
          class="tree"
          :data="treeData"
          empty-text="暂无文件夹数据"
          default-expand-all
          highlight-current
          check-on-click-node
          :expand-on-click-node="false"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <i
              class="fa fa-folder-o"
              style="margin-right: 15px; font-size: 20px; cursor: pointer"
            />
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treeDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="doChoseTreeNodeCallBack"
          :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fileService from '@/api/file'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'TransferButton',
  components: {},
  props: {
    roundFlag: Boolean,
    circleFlag: Boolean,
    textFlag: Boolean,
    liFlag: Boolean,
    size: String,
    item: Object,
  },
  data() {
    return {
      treeDialogVisible: false,
      treeData: [],
      loading: false,
    }
  },
  methods: {
    ...mapActions({
      reloadFileList: 'file/loadFileList',
    }),
    transferFile() {
      let _this = this
      if (
        !_this.item &&
        (!_this.multipleSelection || _this.multipleSelection.length == 0)
      ) {
        _this.$message.error('请选择要移动的文件')
        return
      }
      _this.treeDialogVisible = true
    },
    doTransferFile(targetParentId) {
      let _this = this,
        fileIds = ''
      if (_this.item) {
        fileIds = _this.item.fileId
      } else {
        let fileIdArr = new Array()
        _this.multipleSelection.forEach((item) => fileIdArr.push(item.fileId))
        fileIds = fileIdArr.join('__,__')
      }
      fileService.transfer(
        {
          fileIds: fileIds,
          targetParentId: targetParentId,
        },
        (res) => {
          _this.loading = false
          _this.treeDialogVisible = false
          _this.$message.success('文件移动成功')
          _this.reloadFileList()
          if (_this.$parent.contextMenuVisible) {
            _this.$parent.contextMenuVisible = false
          }
        },
        (res) => {
          _this.loading = false
          _this.$message.error(res.message)
        }
      )
    },
    doChoseTreeNodeCallBack() {
      this.loading = true
      let checkNode = this.$refs.tree.getCurrentNode()
      if (!checkNode) {
        this.$message.error('请选择文件夹')
        this.loading = false
        return
      }
      this.doTransferFile(checkNode.id)
    },
    resetTreeData() {
      this.treeData = new Array()
    },
    loadTreeData() {
      let _this = this
      fileService.getFolderTree(
        (res) => {
          _this.treeData = res.data
        },
        (res) => {
          _this.$message.error(res.message)
        }
      )
    },
  },
  computed: {
    ...mapGetters(['multipleSelection']),
  },
  mounted() {},
  watch: {},
}
</script>

<style lang="scss">
.transfer-button-content {
  display: inline-block;
  margin-right: 10px;
  .el-button--text {
    color: #fff;
    &:hover {
      color: rgba($color: #fff, $alpha: 0.6);
    }
  }
}

.tree-content {
  height: 400px;
}

.tree-content .tree {
  height: 100%;
  overflow: auto;
}
</style>
